<template>
    <div>
        <div class="card-header">
            <!-- 订单列表 -->
            <div class="order-list">
                <!-- 订单项 - 循环渲染 -->
                <div class="order-item" v-for="(order, index) in orderList" :key="index">
                    <!-- 订单头部信息 -->
                    <!-- <div class="">
                        <span class="order-number">订单号: {{ order.orderNo }}</span>
                    </div> -->
                    <div class="order-header">
                        <span class="order-date">{{ order.time }}</span>
                        <span class="order-status" v-if="order.state == 0"  style="color:#52c41a">下单</span>
                        <span class="order-status" v-if="order.state == 1"  style="color:#faad14">接单</span>
                        <span class="order-status" v-if="order.state == 2"  style="color:#faad14">已完成</span>
                        <span class="order-status" v-if="order.state == 3"  style="color:#faad14">取消订单</span>
                    </div>

                    <!-- 订单商品信息 -->
                    <div class="order-goods">
                        <img :src="$Img + order.img" mode="widthFix" class="goods-img">
                        <div class="goods-info">
                            <span class="goods-name">{{ order.name }}</span>
                            <span class="goods-price">¥{{ order.price }}</span>
                            <p  v-if="order.isPromotion == '1'" class="product-name">促销</p>
                        </div>
                    </div>
                    <!-- 订单操作按钮 -->
                    <div class="order-actions"  v-if="order.state == 0 || order.state == 1" @click="storeFront(order)">
                        <button class="action-btn pay-btn">{{  order.state == 0 ? '接单' : order.state == 1 ? '已完成' : ''}}</button>
                    </div>
                </div>
            </div>
            <!-- 加载更多 -->
        </div>
    </div>
</template>
  
<script>
import throttle from "@/utils/debounce.js";
import {  orderWxList ,orderUpdate} from "@/api/fulfil.js";
export default {
    name:'storeOrder',
    data() {
        return {
            orderList: [],
        };
    },
    activated(){
        this.getIndex();
    },
    methods: {
         //获取列表数据
         getIndex() {
            let qyery = {
                agentid:localStorage.getItem("agentid")
            }
            orderWxList(qyery)
                .then((res) => {
                        this.orderList = res.data.data;
                    
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //新增商品
        storeFront: throttle(function (order) {
            {
                let query = {
                    agentid:localStorage.getItem("agentid"),
                    id:order.id,
                    state:order.state == 0  ? '1' : '2',
                }
     
                orderUpdate(query)
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.$toast("修改状态成功");
                            this.getIndex();
                        } else {
                            this.$toast(res.data.msg);
                        }

                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }
        }, 1500),
    }
};
</script>
  
<style scoped>
.card-header {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-image: linear-gradient(to bottom, #b7d9ca 0%, #f3f3f7 100%);
}

.custom-navbar-title {
    width: 100%;
    position: absolute;
    bottom: .125rem;
    span-align: center;
}

.custom-top {
    width: 100%;
}

.order-list-page {
    background-color: #f5f5f5;
    min-height: 100vh;
}

/* 页面标题 */
.page-header {
    padding: .25rem 0;
    background-color: #ffffff;
    span-align: center;
    border-bottom: 1px solid #eeeeee;
}

.header-title {
    font-size: .45rem;
    font-weight: bold;
    color: #333333;
}

/* 筛选栏 */
.filter-bar {
    display: flex;
    background-color: #ffffff;
    padding: .2rem 0;
    border-bottom: 1px solid #eeeeee;
    overflow-x: auto;
    white-space: nowrap;
}

.filter-item {
    flex: 1;
    span-align: center;
    padding: .15rem 0;
    font-size: .35rem;
    color: #666666;
    margin: 0 .125rem;
    border-radius: .375rem;
}

.filter-item.active {
    color: #ff4d4f;
    font-weight: bold;
    background-color: #fff5f5;
}

/* 订单列表 */
.order-list {
    padding: .2rem;
}

/* 订单项 */
.order-item {
    margin: 0 auto;
    width: 90%;
    background-color: #ffffff;
    border-radius: .2rem;
    padding: .25rem;
    margin-bottom: .2rem;
    box-shadow: 0 .025rem .1rem rgba(0, 0, 0, 0.05);
}

/* 订单头部 */
.order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .25rem;
}

.order-date {
    font-size: .325rem;
    color: #999999;
}

.order-number {
    font-size: .325rem;
    color: #666666;
    flex: 1;
    span-align: center;
}

.order-status {
    font-size: .35rem;
    font-weight: 500;
}

.status-completed {
    color: #52c41a;
    /* 已完成 - 绿色 */
}

.status-pending {
    color: #faad14;
    /* 待付款 - 橙色 */
}

/* 商品信息 */
.order-goods {
    display: flex;
    align-items: center;
    padding: .125rem 0;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}

.goods-img {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .1rem;
    margin-right: .25rem;
}

.goods-info {
    flex: 1;
}

.goods-name {
    font-size: .35rem;
    color: #333333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.goods-price {
    font-size: .375rem;
    color: #ff4d4f;
    font-weight: bold;
}

/* 订单操作按钮 */
.order-actions {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    margin-top: .5rem;
}

.action-btn {
    padding: .2rem .6rem;
    font-size: .325rem;
    border-radius: .15rem;
    line-height: 1.4;
}

.cancel-btn {
    background-color: #f5f5f5;
    color: #666666;
    border: 1px solid #eeeeee;
}

.pay-btn {
    background-color: #ff4d4f;
    color: #ffffff;
    border: none;
}
/* 订单操作按钮 */
.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: .2rem;
  margin-top: .25rem;
}

.action-btn {
  padding: .1rem .3rem;
  font-size: .325rem;
  border-radius: .075rem;
  line-height: 1.4;
}
.pay-btn {
  background-color: #ff4d4f;
  color: #ffffff;
  border: none;
}
</style>
  